<template>
  <el-dialog :visible.sync="isShow" :before-close="handleClose" title="计划选课学生" :close-on-click-modal="false"
            :close-on-press-escape="false">
    <div>
      <ul class="switch-ul">
        <li
            v-for="item in tabs"
            :key="item.label"
            @click="activeTab(item.key)"
            :class="{active: viewTypes == item.key}"
        >{{item.label}}</li>
      </ul>    
      <div class="clearfix">
            <div class="float-left" style="margin-bottom: 18px">
              <el-input
                  v-model="queryForm.condition"
                  placeholder="输入学生姓名或者学号"
                  style="width:200px"
                  @keyup.enter.native="filter"
              >
                  <i
                      class="el-icon-search"
                      slot="suffix"
                      style="margin-top:10px;cursor:pointer"
                      @click="filter"
                  ></i>
              </el-input>
            </div>
            <div class="float-left" style="width:240px;" v-if="projId!==1">
              <el-form label-width="80px">
                <el-form-item :label="$t('culturePlan.specialPlan')+':'">
                    <el-select
                        v-model="queryForm.spcialPlan"
                        style="width: 100%;"
                        clearable
                        @change="filter"
                    >
                        <el-option value="">全部</el-option>
                        <el-option
                            v-for="item in options.spcialPlan"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
              </el-form>
            </div>
        </div>
        <el-table :data="students" stripe size="mini">
          <el-table-column prop="studentId" label="学号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="grade" label="年级"></el-table-column>
          <el-table-column prop="enrolSeason" label="入学学期"></el-table-column>
          <el-table-column prop="spcialPlan" label="专项计划" min-width="100" v-if="projId!==1"></el-table-column>
          <el-table-column prop="trainingLevel" label="培养层次"></el-table-column>
          <el-table-column prop="college" label="学院" min-width="240"></el-table-column>
          <el-table-column prop="profession" label="专业" min-width="150"></el-table-column>
        </el-table>
        <el-row>
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 50,100,500,1000]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total_"
            style="float:right;margin-top:10px"
          ></el-pagination>
        </el-col>
        </el-row>
        <div slot="footer" style="margin-top:20px">
          <el-row>
            <el-col>
              <el-button type="primary" class="float-right" @click="handleClose">{{$t('common.btn.confirm')}}</el-button>
            </el-col>
          </el-row>
          
        </div>
    </div>
  </el-dialog>
</template>
<script>
import UTILS from "common/src/utils/utils";
import {
  findSelCourseCountStudent,
  findNoSelCourseCountStudent,
  findScorePassCountStudent,
  findNoScorePassCountStudent,
} from 'common/src/api/culture/culturePlan'
import { queryDic } from "common/src/api/dictionary";
export default {
  props: {
    isShow: { type: Boolean, required: true },
    courseCode: { type: Number, required: true },
    viewType: { type: Number, required: true },
    projId: { type: Number, required: true },
    filterData:{required: true}
  },
  data() {
    return {
      tabs: [
              { label: "已选课学生", key: "1" },
              { label: "未选课学生", key: "2" },
              { label: "及格学生", key: "3" },
              { label: "不及格学生", key: "4" }
            ],
      activeTitle: '',
      viewTypes:'',
      students: [],
      queryForm: { 
        pageNum_: 1, 
        pageSize_: 20, 
        spcialPlan: "", //专项计划
        condition:'',
        courseCode:'',
        campus:'',
        projId:this.projId,
        grade:''

      },
      options: {
        spcialPlan: [], //专项计划
      },
      total_:'',
    }
  },
  methods: {
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.operate(this.viewTypes)
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.operate(this.viewTypes)
    },
    handleClose() {
      this.queryForm.spcialPlan = ''
      this.queryForm.condition = ''
      this.$emit('change-visible');
    },
    filter(){
      this.operate(this.viewTypes)
    },
    operate(key) {
      this.queryForm.courseCode = this.courseCode;
      this.queryForm.grade=this.filterData.grade;
      this.queryForm.campus=this.filterData.campus;
      this.students = [];
      if (key == 1) this.search(findSelCourseCountStudent)
      else if (key == 2) this.search(findNoSelCourseCountStudent)
      else if (key == 3) this.search(findScorePassCountStudent)
      else if (key == 4) this.search(findNoScorePassCountStudent)
    },
    activeTab(key){
        this.viewTypes = key
        this.queryForm.spcialPlan = ''
        this.queryForm.condition = ''
        this.queryForm.pageNum_ = 1
        this.operate(key)
    },
    init() {
            //筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_ZXJH",
                ]
            };
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            spcialPlan: "X_ZXJH",
                        },
                        res.data,
                        this.options
                    );
                }
            });
        },
    search(func) {
      func(this.queryForm).then((res) => {
        if (res.code == 200) {
          this.students = res.data.list
          this.total_ = res.data.total_
        }
      })
    },
  },
  watch: {
    isShow: function(_n, _O) {
      if (_n) {
       this.viewTypes = this.viewType;
        this.operate(this.viewType);
        this.options.spcialPlan=[];
        this.init();
      }
    },
    viewType: function(_n, _O) {
      if (_n) {
        this.viewTypes = _n;
        this.operate(_n);
        if(this.options.spcialPlan.length==0){
            this.init();
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
  ul.switch-ul {
      padding: 0;
      margin: 0 0 20px;
  }
  ul.switch-ul li {
      height: 32px;
      line-height: 32px;
      cursor: pointer;
      display: inline-block;
      padding: 0px 20px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-right:0;
      font-size: 14px;
  }
  ul.switch-ul li:last-child {
      border-right: 1px solid #ccc;
  }
  ul.switch-ul li.active {
      color: #fff;
      background:rgba(58, 127, 232, 1);
      border: 1px solid rgba(58, 127, 232, 1);
  }
</style>
